$f: 19.2;


.home {
  position: relative;
  background: #F9F9F9;

  .bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .bg2 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      display: block;
      object-fit: cover;
      height: 100%;
    }
  }

  .main {
    padding: 288/$f+vw 160/$f+vw 120/$f+vw 160/$f+vw ;
    position: relative;
    z-index: 10;

    .section1 {
      display: flex;
      justify-content: space-between;

      .l {
        width: 645/$f+vw;

        .tag {
          color: #0F77FF;
          line-height: 1.5;
          text-transform: capitalize;
          margin-top: 85/$f+vw;
        }

        h1 {
          margin-bottom: 24/$f+vw;
          line-height: 1.42;
          text-transform: capitalize;
        }

        .des {
          font-weight: 300;
          line-height: 1.5;
        }
      }

      .pic {
        width: 855/$f+vw;
        border-radius: 20/$f+vw;
        overflow: hidden;

        img {
          width: 100%;
          height: 560/$f+vw;
          border-radius: 20/$f+vw;
          transition: all 600ms;
        }

        &:hover {
          img {
            transform: scale(1.05);
          }
        }
      }
    }

    .section2 {
      margin: 120/$f+vw 0;

      h1 {
        line-height: 1.428;
        margin-bottom: 80/$f+vw;
      }

      .content {
        display: flex;
        justify-content: space-between;
        margin-right: 67/$f+vw;

        .pic {
          width: 645/$f+vw;
          border-radius: 20/$f+vw;
          overflow: hidden;

          img {
            width: 100%;
            max-height: 100%;
            // min-height: 708/$f+vw;
            border-radius: 20/$f+vw;
            transition: all 600ms;
          }

          &:hover {
            img {
              transform: scale(1.05);
            }
          }
        }

        .info {
          width: 773/$f+vw;

          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            padding: 25/$f+vw 0;

            .icon {
              img {
                width: 45/$f+vw;
                height: 45/$f+vw;
                display: block;
              }
            }

            p {
              width: calc(100% - 3.6vw);
            }

            &:last-child {
              border-bottom: none;
              padding-bottom: 0;
            }
          }
        }
      }
    }

    .section3 {
      h1 {
        line-height: 1.428;
        margin-bottom: 80/$f+vw;
      }

      .allItems {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 60/$f+vw;

        .item {
          width: 100%;
          padding: 44/$f+vw 50/$f+vw;
          border-radius: 20/$f+vw;
          border: 1px solid #FFF;
          background: rgba(255, 255, 255, 0.30);
          /* 投影 */
          box-shadow: 24px 30px 50px 0px rgba(110, 163, 242, 0.12);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .icon{
            img{
              width: 70/$f+vw;
              height: 70/$f+vw;
              transition: all 600ms;
            }
          }
          .des{
            width: calc(100% - 5.3125vw);
          }
          &:hover{
            .icon{
              img{
                 transform: rotateY(360deg);
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .main{
      padding: 100px 5%;
      .section1{
        flex-direction: column;
        .l{
          width: 100%;
          .tag{
            margin-top:0;
          }
          h1{
            margin-bottom: 12px;
          }
        }
        .pic{
          width: 100%;
          border-radius: 10px;
          margin-top: 20px;
          img{
            height: auto;
            border-radius: 10px;
          }
        }
      }
      .section2{
        margin: 60px 0;
        h1{
          margin-bottom: 40px;
        }
        .content{
          margin-right: 0;
          flex-direction: column;
          .pic{
            width: 100%;
            border-radius: 10px;
            img{
              min-height: inherit;
            }
          }
          .info{
            width: 100%;
            margin-top: 20px;
            .item{
              padding: 12px 0;
              .icon{
                img{
                  width: 24px;
                  height: 24px;
                }
              }
              p{
                width: calc(100% - 40px);
                font-size: 16px;
              }
            }
          }
        }
      }
      .section3{
        h1{
          margin-bottom: 40px;
        }
        .allItems{
          grid-template-columns: repeat(1,1fr);
          gap: 20px 0;
          .item{
            padding: 20px 25px;
            border-radius: 10px;
            .icon{
              img{
                width: 35px;
                height: 35px;
              }
            }
            .des{
              width: calc(100% - 50px);
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}